<template>
<div class="tools-wrapper">
    <template v-for="item in cloneConfig">
        <Button v-if="item.tag==='button'&&item.show" v-bind="item" :style="item.style" class="tools-item" @click="$emit('click',item.name)">
            {{item.text}}
        </Button>
        <Icon v-else-if="item.show" :type="item.icon" v-bind="item" :style="item.style" class="tools-item" @click="$emit('click',item.name)"></Icon>
    </template>
</div>
</template>

<script>
import {merge} from 'lodash';
export default {
  name:'starFloatToobar',
  components: {},
  data() {
    return {
        cloneConfig:[]
    };
  },
  props: {
    config: {
      default: () => {
        return [];
      }
    },
  },
  watch: {
    config:{
        handler(val,oldVal){
            this.cloneConfig=merge(this.defaultConfig,this.config)
        },
        deep:true
    },
  },
  computed: {
    defaultConfig(){
        return [
            {
                show:true,
                name:'add',
                tag:'Icon',
                icon:'md-add',
                color:'#2d8cf0',
                size:24,
                style:{},
            },
            {
                show:true,
                name:'edit',
                tag:'Icon',
                icon:'md-brush',
                color:'#2d8cf0',
                size:24,
            },
            {
                show:true,
                name:'remove',
                tag:'Icon',
                icon:'md-remove',
                color:'red',
                size:24,
            }

        ]
    }
  },
  created() {},
  mounted() {
    this.cloneConfig=merge(this.defaultConfig,this.config)
  },
  methods: {}
}
</script>
<style scoped lang="scss">
    .tools-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: absolute;
    padding:2px;
    z-index: 99;
    top: 0px;
    left: 0px;
    
    }
    .tools-item {
    margin: 3px;
    color:rgb(23, 23, 99);
    &:hover {
        box-shadow: 0 1px 6px rgba(34, 34, 34, 0.2);
    }
    }
</style>